<template>
<div>
        <form :model="user">
            <div class='A'>
                <div><h3>登录</h3></div>
                <div>
                    <div>用户名</div><input v-model="user.name" type="text">
                </div>
                <div>
                    <div>密码</div><input v-model="user.password" type="text">
                </div>
                <div>
                    <div>确认密码</div><input v-model="user.confirm_password" type="text">
                </div>
                <div>
                    <div>邮箱</div><input v-model="user.e_mail" type="text">
                </div>
                <div class ='bt'>
                    <button @click="register">注册</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script lang="ts">
import { Vue } from 'vue-class-component';
import { UserApi } from "@/api/user";
import router from '@/router';

export default class Register extends Vue{
    user={
        name:"",
        password:"",
        confirm_password:"",
        e_mail:""
    }
// 注册用户
    regist1() {
        UserApi.regist({});
    }
    register() {
        if(this.user.name==""||this.user.password==""||this.user.confirm_password==""||this.user.e_mail==""){
            alert("注册内容不准空")
        }
        else{
            UserApi.regist(this.user).then((res)=>{
                alert(res.data.msg)

                router.push({
                    name:"login"
                })
            })
        }
    }
}
</script>

<style lang="less" scoped>
.A{
    div{
        text-align: center;
        div{
            float: left;
            width: 100px;
            text-align: right;

        }
    }
    margin:auto;
    margin-top: 100px;
    border:2px solid #ccc;
    border-radius:10px;
    height:330px;
    width:440px;
    background-color:#fff;
    
}
.bt{

    margin-top: 20px;
}
</style>